<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- Font Awesome 字体它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。 -->
    <div class="container">
        <div class="circle-container">
            <div class="circle">
                <button id="close">
                    <i class="fas fa-times"></i>
                </button>
                <button id="open">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        <div class="content">
            <h1>Amazing Article</h1>
            <small>Folorin Pop</small>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore molestias sunt natus doloremque aspernatur illo explicabo fugiat, ducimus in quod tempora sequi error qui molestiae non. Voluptas itaque similique nihil. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis exercitationem maxime corrupti, maiores id voluptate magni soluta nemo sed quia cum quidem ullam ad aperiam, itaque, nobis natus aliquam sapiente. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, nemo. Nobis dolores impedit quae commodi ipsa sint soluta, id consequatur, distinctio eligendi itaque ut. Cumque porro suscipit omnis exercitationem sed.</p>
            <h3>My Dog</h3>
            <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" >
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque sit tempora magni vero facilis cupiditate animi adipisci blanditiis. Sapiente nihil dolor magni laudantium ut repellat beatae delectus alias quasi cum? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis ipsam iste fugit, ratione similique odio nobis sit officiis porro, doloribus repellendus vitae. Officiis iure cumque assumenda delectus molestiae nisi itaque.</p>
        </div>
    </div>
    <nav>
        <ul>
          <li><i class="fas fa-home"></i> Home</li>
          <li><i class="fas fa-user-alt"></i> About</li>
          <li><i class="fas fa-envelope"></i> Contact</li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>